<template>
    <el-card class="container">
        <div class="header">
            <slot name="header"></slot>
        </div>
        <div class="number">
            <slot name="number"></slot>
        </div>
        <div class="charts">
            <slot name="charts">
            
            </slot>
        </div>
        <div class="tip">
            <slot name="tip"></slot>
        </div>
    </el-card>
</template>

<script setup lang="ts">















</script>
<script lang="ts">
export default {
    name: 'Card'
}
</script>
<style scoped lang="scss">
$color: yellowgreen;

.container {
    .header {
        color: $color;
    }

    .number {
        color: $color;
        font-weight: 900;
        font-style: italic;
        text-indent: 5px;
        font-size: 20px;
        animation: donghua linear .5s 0s 1;
    }

    .charts {
        height: 80px;
        border-bottom: 1px solid $color;
    }

    .tip {
        margin-top: 10px;
        color: $color;
    }
}


@keyframes donghua {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>